<template>
  <van-nav-bar title="诗词问答" left-arrow @click-left="onClickLeft" />
  <van-cell-group>
    <div v-for="(question, index) in currentQuestions" :key="index" class="question-container">
      <div class="question-title">{{ startQuestionNumber + index + 1 }}. {{ question.question }}</div>
      <van-radio-group v-model="answers[startQuestionNumber + index]" direction="vertical" class="options-group">
        <van-radio v-for="(option, i) in question.options" :key="i" :name="option" class="option">
          <span class="option-label">{{ String.fromCharCode(65 + i) }}. {{ option }}</span>
        </van-radio>
      </van-radio-group>
    </div>
    <van-divider></van-divider>
    <div class="button-group">
      <van-button type="primary" @click="prevPage" :disabled="currentPage === 0">上一页</van-button>
      <van-button type="primary" @click="nextPage" :disabled="currentPage === totalPages - 1">下一页</van-button>
      <van-button type="success" @click="submitQuiz" :disabled="!allAnswered">提交</van-button>
    </div>
    <van-popup v-model:show="showResults" position="bottom" style="height: 80vh; font-size: 14px">
      <div class="results-header">
        <h3>你的得分: {{ score }} / 100</h3>
      </div>
      <div v-for="(result, index) in results" :key="index" class="result-container">
        <div class="result-title">{{ index + 1 }}. {{ questions[index].question }}</div>
        <div :style="{ color: result.correct ? 'green' : 'red', fontSize: 14 }">
          {{ result.correct ? '正确' : '错误' }} (你的答案: {{ result.userAnswer || '未回答' }}，正确答案:
          {{ questions[index].correctAnswer }})
        </div>
      </div>
    </van-popup>
  </van-cell-group>
</template>

<script setup>
import { ref, computed } from 'vue'
import { questions } from '@/config/constant'
const onClickLeft = () => history.back()

const currentPage = ref(0)
const answers = ref(Array.from({ length: questions.length }, () => null))
const showResults = ref(false)
const score = ref(0)

const totalPages = computed(() => Math.ceil(questions.length / 5))

const currentQuestions = computed(() => {
  const start = currentPage.value * 5
  return questions.slice(start, start + 5)
})

const startQuestionNumber = computed(() => currentPage.value * 5)

const allAnswered = computed(() => {
  return answers.value.every(answer => answer !== null)
})

const results = ref([])

const prevPage = () => {
  if (currentPage.value > 0) currentPage.value--
}

const nextPage = () => {
  if (currentPage.value < totalPages.value - 1) currentPage.value++
}

const submitQuiz = () => {
  let totalScore = 0
  results.value = questions.map((q, index) => {
    const userAnswer = answers.value[index]
    const correct = userAnswer === q.correctAnswer
    if (correct) {
      totalScore += 10
    }
    return { correct, userAnswer }
  })
  score.value = totalScore
  showResults.value = true
}
</script>

<style scoped>
.van-cell-group {
  padding: 16px;
  background-color: #f9f9f9;
}

.question-container {
  margin-bottom: 16px;
}

.question-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.5;
}

.options-group {
  margin-top: 8px;
}

.option {
  margin-bottom: 8px;
}

.option-label {
  font-size: 14px;
  display: block;
}

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}

.van-popup {
  padding: 16px;
}

.results-header {
  text-align: center;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
}

.result-container {
  margin-bottom: 16px;
  margin-left: 16px;
}

.result-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.5;
}
</style>
